<template>
 <div class='app-container calendar-list-container'>
    <div class='filter-container'>   
      <org-tree :dcksValue.sync="listQuery.dep"  :dcksLabel.sync="listQuery.depdesc"  :isMultiple="true"   name="牵头部门"    :checkStrictly="false" :isDialog="true"></org-tree>
      <!--  {{listQuery.dep}} {{listQuery.depdesc}} -->
      <el-select v-model='listQuery.type' placeholder='会议类别' clearable>
        <el-option label="新线会议" value="1"></el-option>
        <el-option label="五听五问" value="2"></el-option>
      </el-select> 
      <el-select v-model='listQuery.quarter' placeholder='所属季度' clearable>
        <el-option label="第一季度" value="1"></el-option>
        <el-option label="第二季度" value="2"></el-option>
        <el-option label="第三季度" value="3"></el-option>
        <el-option label="第四季度" value="4"></el-option>
      </el-select> 
      <el-select v-model="listQuery.enable" placeholder="会议状态" clearable >
        <el-option label="无效" value="0"></el-option>
        <el-option label="草稿" value="1"></el-option>
        <el-option label="已审核" value="2"></el-option>       
      </el-select>
      <el-input @keyup.enter.native='handleFilter' style='width: 150px;' class='filter-item' placeholder='会议名称' v-model='listQuery.name'>
      </el-input>
      <el-date-picker id='dp' v-model='dateSech' type="daterange" @change="dateSechChange"
        align="right"
        placeholder="选择会议召开时间范围"
        :picker-options="pickerOptions1" value-format="yyyy-MM-dd">
      </el-date-picker>
       <el-select v-model='listQuery.line' placeholder='线别' clearable>
        <el-option label="1号线" value="1000"></el-option>
        <el-option label="2号线" value="1100"></el-option>
      <el-option label="4号线" value="1300"></el-option>
      <el-option label="4号线支线" value="1400"></el-option>
      <el-option label="3号线" value="1500"></el-option>
      <el-option label="5号线" value="1600"></el-option>
      </el-select> 
      <el-button class='filter-item' type='primary' v-waves icon='search' @click='handleFilter'>搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
      <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
      <el-button class='filter-item' type='primary' :disabled="this.sels.length === 0" v-waves icon='delete' @click='handleDel'>删除</el-button>
      </div>   
      <el-table height="400" @selection-change="selsChange" :key='tableKey' :data='list' v-loading='listLoading' element-loading-text='给我一点时间' border fit highlight-current-row style='width: 100%'>
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column   type="index" width="60">
      </el-table-column>
      <el-table-column  label='牵头部门名称' prop="depdesc" width="100">
      </el-table-column>
      <el-table-column label='会议名称' show-overflow-tooltip prop="name">
      </el-table-column>  
      <el-table-column  label='会议召开时间' prop="date" width="50">
        <el-date-picker v-model="listQuery.date" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd"></el-date-picker>
      </el-table-column>
      <el-table-column label='线别' align="center" width="100" prop="line">
        <template scope="scope">
          {{scope.row.line | lineFilter}}
        </template>
      </el-table-column>
      <el-table-column label='所属季度' align="center" width="100" prop="quarter">
        <template scope="scope">
          {{scope.row.quarter | quarterFilter}}
        </template>
      </el-table-column>
      <el-table-column label='会议类别' align="center" width="100" prop="type">
        <template scope="scope">
          {{scope.row.type | typeFilter}}
        </template>
      </el-table-column>
      <el-table-column label='参会人' show-overflow-tooltip width="100" prop="people">
      </el-table-column>
      <el-table-column label='会议纪要'   show-overflow-tooltip prop="jiyao">
        <template scope="scope">
        
         <a  :href="downloadUrl+'?generateWord='+ jy.key+'&fileName='+encodeURI(encodeURI(jy.name))" target="_blank" v-for="jy in scope.row.jiyao" :key="jy.key" v-text="jy.name"></a>
       <!--   <el-tag  :href="downloadUrl+'?generateWord='+ jy.key+'&fileName='+encodeURI(encodeURI(jy.name))" target="_blank" v-for="jy in scope.row.jiyao" :key="jy.key" v-text="jy.name" :disable-transitions="false"></el-tag>-->
        </template>
      </el-table-column>
      <el-table-column label='会议通知来源' show-overflow-tooltip prop="laiyuan">
      </el-table-column>   
      <el-table-column label='审核状态' align="center" width="100">
        <template scope="scope">
          <el-tag size="medium" :type="scope.row.enable === '1' ? 'success' : 'error'">{{scope.row.enable | enableFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template scope="scope">
          <el-button size="small" type="success"   @click="handleUpdate(scope.row,scope.row.index)">修改  
          </el-button>
          <el-button size="small" type="success" @click="addMatter(scope.row)">事项</el-button>
        </template>
      </el-table-column>
        <el-table-column align="center" label="审核" width="100">
         <template scope="scope">     
          <el-button size="mini" type="success" @click="handleCheck1(scope.row)">是否同意
           </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show='!listLoading' class='pagination-container'>
      <el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange' :current-page.sync='listQuery.page'
        :page-sizes='[10,20,30,50]' :page-size='listQuery.limit' layout='total, sizes, prev, pager, next, jumper' :total='total'>
      </el-pagination>
    </div>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form class="small-space" :model="temp" :rules="rules" ref="form" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="牵头部门" prop="dep">
          <org-tree :dcksValue.sync="temp.dep"  :dcksLabel.sync="temp.depdesc"   :isMultiple="false"   name="牵头部门"     :checkStrictly="true" :isDialog="true"></org-tree>       
        </el-form-item>       
         <el-form-item label="会议名称" prop="name">
          <el-input v-model="temp.name"></el-input>
        </el-form-item>
        <el-form-item label="会议召开时间" prop="date">
          <el-date-picker v-model="temp.date" align="right" type="date" placeholder="选择会议召开日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd"></el-date-picker>     
        </el-form-item>  
        <el-form-item label="线别" prop="line">
          <el-select v-model="temp.line" >
            <el-option label="1号线" value="1000"></el-option>
            <el-option label="2号线" value="1100"></el-option>
            <el-option label="4号线" value="1300"></el-option>
            <el-option label="4号线支线" value="1400"></el-option>
            <el-option label="3号线" value="1500"></el-option>
            <el-option label="5号线" value="1600"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属季度" prop="quarter">
          <el-select v-model="temp.quarter" >
            <el-option label="第一季度" value="1"></el-option>
            <el-option label="第二季度" value="2"></el-option>
            <el-option label="第三季度" value="3"></el-option>
            <el-option label="第四季度" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会议类别" prop="type">
          <el-select v-model="temp.type" >
            <el-option label="新线会议" value="1"></el-option>
            <el-option label="五听五问" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参会人" prop="people">
          <cmts :dynamicTags="temp.people"></cmts>
        </el-form-item>
        {{temp.people}}
        <el-form-item label="会议纪要"  prop="jiyao">
          <!--<el-upload class="el-icon-upload" :on-success="handleSuccess"     :on-remove="handleRemove"   name="upload"    :action="uploadUrl"   multiple :file-list="fileList3">
            <el-button type="primary">点击上传</el-button>
          </el-upload>-->
         <!--  <file :jiyao="temp.jiyao"  @on-fileList3-change="onFileList3Change"   ></file>-->     
          <Fileup :vfiles.sync="temp.jiyao"></Fileup>              
        </el-form-item>{{temp.jiyao}}
        <el-form-item label="会议通知来源" prop="laiyuan">
          <el-input v-model="temp.laiyuan"></el-input>
        </el-form-item>
        <el-form-item v-if="dialogStatus=='update'" label="会议状态" prop="enable">
          <el-select v-model="temp.enable">
            <el-option label="草稿" value="1"></el-option>
            <el-option label="无效" value="0"></el-option>                   
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create">确 定</el-button>
        <el-button v-else type="primary" @click="update">确 定</el-button>      
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { fetchList, create, update, del,check1, check2 } from "@/api/meeting";
import cmts from "@/components/Customer/csMemberTags";
import Fileup from "@/components/fileup/fileup";
import waves from "@/directive/waves/index.js"; // 水波纹指令
import orgTree from "@/components/OrgTree/orgTree";
export default {
  name: "x",
  directives: {
    waves
  },
  components: { cmts, orgTree, Fileup },
  data() {
    return {
     // uploadUrl: process.env.uploadUrl,
      downloadUrl: process.env.downloadUrl,
      dcksValue: [],
      dcksLabel: [],
      sels: [],
      list: null,
      showAuditor: false,
      total: null,
      listLoading: null,
      listQuery: {
        page: 1,
        limit: 20,
        date: undefined,
        dep: [],
        type: undefined,
        depdesc: [],
        quarter: undefined,
        name: undefined,
        line: undefined,
        sort: "+id"
      },
      dateSech: "2018-01-01",
    //  fileList3: [],
      temp: {
        id: undefined,
        dep: [],
        enable: "",
        depdesc: [],
        name: "",
        date: "",
        line: "",
        type: "",
        quarter: "",
        people: [],
        jiyao: [],
        laiyuan: ""
      },
      delids: {
        ids: ""
      },
      checkids: { ids: "" },
      textMap: {
        update: "编辑",
        create: "创建"
      },
      dialogFormVisible: false,
      dialogStatus: "",
      tableKey: 0,
      rules: {
        dep: [
          { required: true, message: "请输入牵头部门", trigger: "blur" },
        ],
        date: [{ required: true, message: "请输入召开时间", trigger: "blur" }],
        type: [{ required: true, message: "请输入会议类别", trigger: "blur" }],
        name: [{ required: true, message: "请输入会议名称", trigger: "blur" }]
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setDate(date.getDate() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setDate(date.getDate() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  filters: {
   enableFilter: function(value) {
      if ("0" === value) {
        return "无效";
      } else if ("1" === value) {
        return "草稿";
      }else if ("2" === value) {
        return "已审核";
      } 
    },
    typeFilter: function(value) {
      if ("1" === value) {
        return "新线会议";
      } else if ("2" === value) {
        return "五听五问";
      }
      return "未知会议类别";
    },
    quarterFilter: function(value) {
      if ("1" === value) {
        return "第一季度";
      } else if ("2" === value) {
        return "第二季度";
      } else if ("3" === value) {
        return "第三季度";
      } else if ("4" === value) {
        return "第四季度";
      }
      return "未知会议类别";
    },
    lineFilter: function(value) {
      if ("1000" === value) {
        return "1号线";
      } else if ("1100" === value) {
        return "2号线";
      } else if ("1300" === value) {
        return "4号线";
      } else if ("1400" === value) {
        return "4号线支线";
      } else if ("1500" === value) {
        return "3号线";
      } else if ("1600" === value) {
        return "5号线";
      }
      return "未知线别";
    }
  },
  methods: {
    getList() {
       this.listLoading = true;
       fetchList(this.listQuery).then(response => {
         if (response.status === 200 && response.data.code === 2000) {
           this.list = response.data.items;
           console.log("this.list1", this.list);
         // for(const hy of this.list)
          // {
           //   for(const jy of hy.jiyao)
          //   {
          //    console.log("this.hy.jiyao.name",jy.name,jy.url);
          //    hy.jiyao="<a href='http://wwww.baidu.com target=_blank>test</a>";
           //    }
          // }
           console.log("this.list2", this.list);
           this.total = response.data.total;
         } else {
          console.log(response);
           this.$notify({
             title: "失败",
             message: response.status + response.data.msg,
             type: "error",
             duration: 200000
           });
         }
         this.listLoading = false;
       });
     // this.list = [
        //{
        //  id: "1",
        //  dep: ["1"],
         // depdesc: ["企划部"],
         // name: "信息化会议",
         // date: "2018-07-08",
          //line: "1000",
         // type: "1",
          //people: ["毛毛", "豆豆"],
          //jiyao: [
          //  {
           //   key: "HSQ9MZI3U7ATODK5",
             // name: "重要链接.txt"
           // },
           // {
             // key: "3DXBIMWAKERYSOF2",
             // name: "经验问题小结.xlsx"
           // }
          //],
          //quarter: "1",
          //laiyuan: "综合部"
       // },
        //{
         // id: "2",
         // dep: ["9"],
         // depdesc: ["企划部/企管科"],
         // name: "信息化会议",
         // date: "2018-07-08",
         // line: "1100",
         // type: "2",
          //people: ["毛毛", "嘟嘟"],
          //jiyao: [],
          //quarter: "1",
          //laiyuan: "综合部"
       // }
      //];
    },
    dateSechChange(val) {
      this.listQuery.date = val;
    },
    //  onFileList3Change(val){
    //  console.log("onFileList3Change",onFileList3Change);
    // this.temp.jiyao=val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    // console.log("this.temp.jiyao",this.temp.jiyao);
    // },
    handleCreate() {
      this.resetTemp();
     // this.fileList3 = [];
     // this.vxxx = [];
      console.log("this.tempcreate", this.temp);
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
    },
    addMatter(row) {
      this.$router.push({ path: "addMatter", query: { matter_id: row.id, matter_enable: row.enable}});
    },
    handleUpdate(row, index) {
      this.temp = JSON.parse(JSON.stringify(row));
      //this.temp = Object.assign({}, row);
      //console.log(this.temp);
      // this.JiyaoTofileList(this.temp);
      this.rowindexs = row.index;
        if (this.temp.enable === "2") {
        this.$notify({
          title: "失败",
          message: "该数据已经被审核，不能修改",
          type: "error",
          duration: 2000
        });
        // 待审核
      } else{
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
    }
    },
    selsChange(sels) {
      this.sels = sels;
    },
    handleDel() {
      this.$confirm("删除?", "提示", { type: "warning" })
        .then(async () => {
          this.$store.dispatch("openLoading");

          const idg = this.sels.map(item => item.id); //['1','2','3']
          console.log(idg);
          for (const y of this.sels) {
            console.log("this.sels", this.sels);
            console.log("y.createMember", y.createMember);
            console.log("this.name", this.name);
            if (y.enable === "2" || y.createMember != this.name) {
              // console.log(y);
              const index1 = idg.indexOf(y.id);
              const index2 = this.sels.indexOf(y);
              console.log("index1", index1);
              console.log("index2", index2);
              idg.remove(index1);
              this.sels.remove(index2);
              console.log("idg", idg);
              console.log("this.sels", this.sels);
              // idg.splice(index1, 1);
              // this.sels.splice(index2, 1);
              //  console.log("this.sels", this.sels);
            }
          }
          console.log("idg", idg);
          console.log("this.sels", this.sels);
          this.delids.ids = this.sels.map(item => item.id).join(); //'1,2,3'
          console.log(this.delids.ids);
          const res = await del(this.delids);
          // debugger
          if (res.data.code == 2000) {
            for (const y of idg) {
              for (const v of this.list) {
                if (v.id === y) {
                  const index = this.list.indexOf(v);
                  this.list.splice(index, 1);
                  break;
                }
              }
            }
            // console.log(this.list.length)
            // console.log(idg.length)
            this.total = this.list.length;
            // console.log("this.total",this.total)
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000
            });
          } else {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(() => {
          this.$store.dispatch("closeLoading");
          this.$notify({
            title: "失败",
            message: "删除失败",
            type: "error",
            duration: 2000
          });
        });
    },
    create() {
      // validate
      this.$store.dispatch("openLoading");
      this.$refs["form"].validate(async valid => {
        console.log("create");
        if (valid) {
          console.log("valid", valid);
          const res = await create(this.temp);
          console.log("res", res);
          console.log("this.temp", this.temp);
          // debugger
          if (res.data.code == 2000) {
            this.temp.id = res.data.item.id;
            this.temp.enable = "1";
            this.list.unshift(this.temp);
            console.log("this.list", this.list);
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "成功",
              message: "创建成功",
              type: "success",
              duration: 2000
            });
          } else {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "创建失败",
              type: "error",
              duration: 2000
            });
          }
        } else {
          this.$store.dispatch("closeLoading");
          console.log("error submit!!");
          return false;
        }
        this.dialogFormVisible = false;
      });
    },
    update(rowindexs) {
      this.$store.dispatch("openLoading");
      this.$refs["form"].validate(async valid => {
        if (valid) {
          const res = await update(this.temp);
          //console.log("10");
          console.log(res);
          if (res.data.code == 2000) {
            this.list.splice(rowindexs, 1, this.temp);
            console.log("this.temp", this.temp);
            console.log("this.list", this.list);

            // for (const v of this.list) {
            // if (v.id === this.temp.id) {
            //  const index = this.list.indexOf(v);
            // this.list.splice(index, 1, this.temp);
            // break;
            // }
            // }
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
          } else {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "更新失败" + res.data.msg,
              type: "error",
              duration: 2000
            });
          }
        } else {
          this.$store.dispatch("closeLoading");
          console.log("error submit!!");
          return false;
        }
        this.dialogFormVisible = false;
      });
    },
    //todo
    resetTemp() {
      this.temp = {
        id: undefined,
        dep: [],
        enable: "",
        jiyao: [],
        people: [],
        depdesc: [],
        name: "",
        date: "",
        line: "",
        type: "",
        quarter: "",       
        laiyuan: "",  
        descr: ""
      };
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "ID",
          "牵头部门名称",
          "会议名称",
          "会议召开时间",
          "线别",
          "所属季度",
          "会议类别",
          "参会人",
          "会议通知来源"
        ];
        const filterVal = [
          "id",
          "depdesc",
          "name",
          "date",
          "line",
          "quarter",
          "type",
          "people",
          "laiyuan"
        ];
        const data = this.formatJson(filterVal, this.list);
        excel.export_json_to_excel(tHeader, data, "table-list");
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "tel") {
            return "不可下载";
          } else {
            return v[j];
          }
        })
      );
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    handleCheck1(row) {
      this.temp = JSON.parse(JSON.stringify(row));
      // console.log(this.temp)
      //草稿状态
      if (this.temp.enable === "0") {
        this.$notify({
          title: "失败",
          message: "审核失败",
          type: "error",
          duration: 2000
        });
        // 待审核
      } else if (this.temp.enable === "1") {
           console.log("this.temp.enable",this.temp.enable)
        this.$confirm("确认审核?", "提示", { type: "warning" })
          .then(async () => {
            this.$store.dispatch("openLoading");
              console.log("133")
            // const idg = this.sels.map(item => item.id); //['1','2','3']
            // console.log(idg);
            // this.checkids.ids = this.sels.map(item => item.id).join(); //'1,2,3'
            // console.log(this.checkids.ids)
           this.checkids.ids = this.temp.id;
           console.log("this.checkids.ids",this.checkids.ids)
           const res = await check1(this.checkids);
            // debugger
             console.log("res",res)
              console.log("res.data",res.data)
            if (res.data.code == 2000) {
               console.log("res.data.code",res.data.code)
              // for (const y of idg) {
              for (const v of this.list) {
                console.log("v.id",v.id )
                if (v.id === this.temp.id) {
                  console.log("v",v)
                  console.log("this.temp.id",this.temp.id )
                  const index = this.list.indexOf(v);
                  v.enable = "2";
                  v.checkDate = res.data.currentTime;
                  v.checkMember = res.data.currentMemberId;
                  this.list.splice(index, 1, v);
                  break;
                }
              }
              // }
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "成功",
                message: "审核成功",
                type: "success",
                duration: 2000
              });
            } else if (res.data.code) {
              // console.log(res.data.msg)
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "失败",
                message: "在我的角色对应的权限里,没有审核权限",
                // message: res.data.msg,
                type: "error",
                duration: 2000
              });
            } else {
              this.$store.dispatch("closeLoading");
              this.$notify({
                title: "失败",
                message: "审核失败",
                type: "error",
                duration: 2000
              });
            }
          })
          .catch(() => {
            this.$store.dispatch("closeLoading");
            this.$notify({
              title: "失败",
              message: "审核失败",
              type: "error",
              duration: 2000
            });
          });
        // 已审核
      } else {
        this.$notify({
          title: "失败",
          message: "审核失败",
          type: "error",
          duration: 2000
      });
      }
    }
  }
};
</script>



















